<template>
  <div class="materialInfo" style="margin: 20px 0 0 60px;">
    <el-main>
      <div style="position: absolute">
        <swiper class="swiper" :options="swiperOptions" ref="bigImage">
          <swiper-slide v-for="(info,index) in imageList" :key="index">
            <img :src="info.image"
                 alt="装修设计图片" height="500px" width="700px"
                 preview="0"
                 style="border-radius: 10px"
            />
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <div class="textInfo" style="margin-left: 750px;width: 495px;line-height: 40px">
        <p style="font-size: 25px;font-family: Cambria,serif;font-weight: bold;">
          {{ order.orderTitle }}</p>
        <el-divider></el-divider>
        <div style="margin-top: 10px;color: grey;padding-left: 10px">
          <span
            style="width: 10px;height: 15px;background-color: lightgrey;border-radius:3px;color: white;padding: 1px"
          >ID</span>
          <span style="font-size:13px;" v-if="orderDetail.modelId==null">{{ order.modelNo }}</span>
          <span style="font-size:13px;" v-if="orderDetail.modelId!=null">{{ orderDetail.modelId }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ orderDetail.sceneName }}/{{ orderDetail.gnflName }}/{{ order.fgflName }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>325次下载</span>
          <el-divider direction="vertical"></el-divider>
          <span style="margin-right: 5px">{{ orderDetail.makeName }}</span>
          <span v-if="order.commentNum>=0 && order.commentNum<=4"
                style="width: 28px;height: 16px;background-color:#fce8e8;padding:3px;border-radius: 3px;color: red"
          >差评</span>
          <span v-if="order.commentNum>=5 && order.commentNum<=7"
                style="width: 28px;height: 16px;background-color:#ddebfa;padding:3px;border-radius: 3px;color: #077df6;font-weight:bolder;opacity: 0.7"
          >中评</span>
          <span v-if="order.commentNum>=8 && order.commentNum<=10"
                style="width: 28px;height: 16px;background-color:#e7f3e3;padding: 3px;border-radius: 3px;color:rgba(4,166,4,0.87);font-size: 5px"
          >好评</span>
        </div>
        <div style="width: 450px;">
          <span class="iconfont icon-shouye" style="font-size: 20px;font-family: Broadway,serif;">订单信息</span><br/>
          <el-descriptions :column="2" style="margin-top: 15px;">
            <el-descriptions-item label="订单金额">￥{{ order.money }}</el-descriptions-item>
            <el-descriptions-item label="订单编号">{{ order.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="附件" v-if="orderDetail.modelLevelName!=null">
              <el-tag size="small">{{ orderDetail.modelLevelName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="附件" v-if="orderDetail.modelLevelName==null">
              <el-tag size="small">{{ orderDetail.zpshName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="所属客服">
              <el-tag size="small">客服{{ order.customerServiceId }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ order.orderDate }}</el-descriptions-item>

          </el-descriptions>
          <el-descriptions :column="1" direction="vertical" :colon="false" class="uploadFile">
            <el-descriptions-item v-if="orderDetail.modelSize!=null">
              <el-link style="margin-left: 140px;color: #1787FB" :underline="false"
                       href="http://127.0.0.1:8083/uploadFiles/测试测试.zip"
              >下载附件（{{ orderDetail.modelSize }}）
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item v-if="orderDetail.modelSize==null">
              <el-link style="margin-left: 140px;color: #1787FB" :underline="false"
                       href="http://127.0.0.1:8083/uploadFiles/测试测试.zip"
              >下载附件（345KB）
              </el-link>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="width: 450px;margin-top: 10px">
          <span class="iconfont icon-renwu1" style="font-size: 20px;font-family: Broadway,serif;margin-top: 10px"
          >任务信息</span>
          <el-descriptions :column="1" style="margin-top: 10px">
            <el-descriptions-item :label="orderDetail.taskName">￥{{ orderDetail.money }}</el-descriptions-item>
            <el-descriptions-item label="上传时间">{{ orderDetail.createTime }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <el-button type="primary" plain class="iconfont icon-shujutansuomoxing"
                   style="width: 350px;height: 50px;margin-top: 30px;margin-left: 50px"
        >下载模型<span>(65MB)</span></el-button>
      </div>
    </el-main>
    <el-container>
      <div class="swiper-no-swiping" style="margin-top: -45px">
        <swiper class="swiper1" :options="swiperOptionsTwo" style="position:absolute;" ref="smallImage">
          <swiper-slide v-for="(info,index) in imageList" :key="index" style="opacity:0.7">
            <img :src="info.image"
                 alt="装修设计图片" height="135px" width="170px"
                 style="border-radius: 10px"
                 @click="clickImage(index)"
            />
          </swiper-slide>
        </swiper>
      </div>
    </el-container>
    <el-footer style="margin-top: 90px">
      <div>
        <h3 style="font-size: 20px;font-family: Cambria,serif;font-weight: bold;margin-left: 10px">相似图片</h3>
        <div class="likeImage" v-for="(like,index) in likeImage" :key="index">
          <img :src="require(`@/assets/imgs/toilet1.jpg`)"
               alt="装修设计图片" height="200px" width="220px"
               preview="2"
               style="border-radius: 10px;"
          />
        </div>
      </div>

    </el-footer>

  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import axios from '@/utils/request'

export default {
  name: 'MaterialInfo',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    let _vm = this
    return {
      orderDetail: {},  //任务信息
      order: {},        //订单信息
      imageList: [],
      likeImage: [{}, {}, {}, {}, {}],
      num: 0,
      swiperOptions: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChange: function() {
            _vm.changeBigImage(this.activeIndex)
          }
        }
      },
      swiperOptionsTwo: {
        slidesPerView: 3,
        centeredSlides: true,
        centeredSlidesBounds: true
      },
      on: {
        slideChange: function() {
          _vm.changeBigImage(this.activeIndex)
        }
      }
    }
  },
  methods: {
    clickImage(index) {
      this.$refs.smallImage.swiper.slideTo(index, 1000, false)
      this.$refs.bigImage.swiper.slideTo(index, 1000, false)
    },
    changeBigImage(index) {
      this.$refs.smallImage.swiper.slideTo(index, 1000, false)
      this.$refs.bigImage.swiper.slideTo(index, 1000, false)
    },
    queryImageByOrderId(orderId) {
      axios.get('/tOrderImage/queryImageByOrderId', { params: { 'orderId': orderId } }).then(res => {
        this.imageList = res
        this.imageList.forEach(item => {
          item.isTrue = false
        })
        console.log('返回的图片集合')
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    if (this.$route.params.order != null && this.$route.params.orderDetail != null) {
      this.order = JSON.parse(this.$route.params.order)
      this.orderDetail = JSON.parse(this.$route.params.orderDetail)
      this.queryImageByOrderId(this.order.id)
    }
  }
}

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.swiper {
  width: 720px;
  margin-left: -5px;
}

.swiper1 {
  margin-left: 80px;
  width: 540px;
}

.swiper1 .swiper-slide-active {
  opacity: 0.9 !important;
  width: 175px !important
}

.swiper-slide {
  left: 10px;
}

.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
  width: 4%;
  height: 6%;
  font-size: 25px !important;
}

.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
  width: 4%;
  height: 6%;
  font-size: 25px !important;
}

.smallImageList {
  display: inline-block;
}

.likeImage {
  display: inline-block;
  padding: 11px;
}

::v-deep .el-descriptions__body {
  background-color: #efeeee;
  padding: 10px;
  opacity: 0.7;
  color: black;
}

.uploadFile ::v-deep .el-link:hover {
  font-weight: bold !important;
}
</style>
